<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en"><head>



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="ajax.js" type="text/javascript">
  </script>


<script type="text/javascript">

function loadJSON(fname) 
{
	var xhr=createXHR();
	xhr.open("GET", fname,true);
	xhr.onreadystatechange=function() 
	{
		if (xhr.readyState == 4) 
		{
			if (xhr.status != 404) 
			{
				var response=eval("(" + xhr.responseText + ")");		
				for(tileCoOrds in response) {
					document.getElementById("zone").innerHTML += "&nbsp;" +  tileCoOrds + " : " + response[tileCoOrds] + "<br/>";
				}
			} 
			else 
			{
				document.getElementById("zone").innerHTML = fname + " not found";
			}
		}
	}
	xhr.send(null);
}



</script>
	<title>Ajax Get JSON Demo</title></head><div FirebugVersion="1.3.0" style="display: none;" id="_firebugConsole"></div><body bgcolor="#ffffff">
<p><font size="+3">Ajax Get JSON Demo - Using plain javascript</font></p>
<hr>
<form name="ajax" method="post" action="">
			
  <p>
    <input value=" Click to load the JSON menu file " onclick="loadJSON('jsonexample1.json')" type="button">
  </p>

</form>
	


<div id="zone"></div>

<p><br>
  <a href="move1.json">View the JSON file</a> </p>
<br>
</body></html>